<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>附近加油站</title>
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">-->
    <link rel="stylesheet" href="../../../resource/css/index.css">
</head>
<body>
<div id="app">
<template>
  <div class="gasmap" id="topmap"></div>
  <van-tabs v-model="active">
    <van-tab title="按距离来排序">
      <van-cell v-for="item in list" :key="item.id">
        <div slot="title">
          <h4 class="title" v-text="item.station_name"></h4>
          <p class="add" v-text="item.address"></p>
          <p class="other"><img class="ico-add" src="http://download.bihuapp.com/icon/d2.png" alt=""><span v-text="item.distance"></span>km</p>
          <p class="gas">
            <span class="gasitem" v-if="item.price_92"><span class="model">92#</span><span class="price"><span v-text="item.price_92"></span>元/升</span></span>
            <span class="gasitem" v-if="item.price_95"><span class="model">95#</span><span class="price"><span v-text="item.price_95"></span>元/升</span></span>
            <span class="gasitem" v-if="item.price_98"><span class="model">98#</span><span class="price"><span v-text="item.price_98"></span>元/升</span></span>
            <span class="gasitem" v-if="item.price_0"><span class="model">0#</span><span class="price"><span v-text="item.price_0"></span>元/升</span></span>
          </p>
        </div>
        <div class="navigation" @click="showline(item.lon, item.lat)">
          <img class="ico-nav" src="http://download.bihuapp.com/icon/d1.png" alt="">
          <p>路线</p>
        </div>
      </van-cell>
    </van-tab>
  </van-tabs>
  <van-popup class="pop" v-model="show" position="top" @opened="showmap">
    <div class="allmap" id="map"></div>
    <div id="panel"></div>
    <div id="back"><van-button plain type="info" @click="back">返回</van-button></div>
  </van-popup> 
</template>
</div>
<script src="../../../resource/js/vue.min.js"></script>
<script src="../../../resource/js/vant.min.js"></script>
<script src="../../../resource/js/magjs-x.js"></script>
<script src="../../../resource/js/vue-router.js"></script>
<script src="../../../resource/js/axios.min.js"></script>
<script src="../../../resource/js/qs.min.js"></script>
<!--<script src="http://vuejs.org/js/vue.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>-->
<!--<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>-->
<!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>-->
<!-- <script src="https://webapi.amap.com/maps?v=1.4.14&key=ac7ce3c200e49a57980cc71f32c7c0b8"></script> -->
<!-- <script src="https://webapi.amap.com/maps?v=1.4.14&key=ac7ce3c200e49a57980cc71f32c7c0b8"></script> -->
<script src="https://webapi.amap.com/maps?v=1.4.14&key=1d6ace28dee9f69b8aef583f2b29171f"></script>
<!-- <script src="https://webapi.amap.com/maps?v=1.4.14&key=11f71780821e4466d9232bb3205189b3"></script>     -->
<script>
new Vue({
  el: '#app',
  data: {
      title: '附近加油站',
      active: '0',
      list: [],
      center: [118.041275, 37.3852386],
      lon:'',
      lat: '',
      show: false
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    mag.toLogin(function(rs) {
      this.token = rs.token
      localStorage.setItem('token', rs.token)
    })
    mag.getLocation(res =>{
      that.center = [res.lng, res.lat]
    })
  },
  mounted: function () {
    this.fetchData()
  },
  methods: {    
    fetchData () {
      let that = this
      mag.getLocation(res =>{
        that.center = [res.lng, res.lat]
      })
      var map = new AMap.Map('topmap', {
        resizeEnable: true,
        center: that.center,
        zoom: 13
      })
      
      let postparams = {
        token: localStorage.getItem('token'),
        lat: this.center[1],
        lon: this.center[0]
      }
      let markerObject={},marker,markers=[]
      axios.post('/Gasstation/getGasStationNear', postparams).then(({data}) => {
        if (data.code === 200) {
          let datas = data.data
          this.list = datas
          datas.forEach(res => {
            markerObject.position = [res.lon, res.lat]
            markerObject.title = res.station_name
            marker = new AMap.Marker(markerObject)
            markers.push(marker)
          })
          map.add(markers)
        } else {
        }
      })
    },
    showmap (){
      //基本地图加载
      let that = this
      var popmap = new AMap.Map('map', {
        resizeEnable: true,
        center: that.center,
        zoom: 13
      })
      
      AMap.plugin('AMap.Driving', function() {
        if(driving){
          //调用clear()函数清除上一次结果，可以清除地图上绘制的路线以及路径文本结果
          driving.clear()
          popmap.clearMap()
        }
        var driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME,
          map: popmap,
          panel: 'panel'
        })
        var startLngLat = that.center
        var endLngLat = [that.lon, that.lat]
        driving.search(startLngLat, endLngLat, function (status, result) {
          // 未出错时，result即是对应的路线规划方案
          // console.log(status)
          // console.log(result)
        })
      })
    },
    showline (lon, lat) {
      let that =this
      this.show = true
      this.lon = lon
      this.lat = lat
    },
    back () {
      this.show = false
    }

  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,body,#app{
  width: 100%;
  height: 100%;
}
.white{
  fill: #fff;
}
.blue {
  color: #4F91F2;
}
.text {
  border: none;
  background: transparent;
  color: #333;
}
.text:after {
    border: none;
}

.title {
  font-weight: normal;
  margin: 0;
  font-size: 16px; 
}
.add {
  font-size: 14px;
  margin: 10px 0 0;
  line-height: 1.268em;
}
.other {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}
.ico-add{
  width: 12px;
  padding-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.gasitem{
  border: solid #607081 1px;
  border-radius: 3px;
  font-size: 11px;
  margin-right: 8px;
}
.gasitem .model{
  color: #fff;
  background-color: #6A7989;
  border-radius: 3px 0 0 3px;
  font-size: 11px;
  padding: 1px 2px;
}
.gasitem .price{
  color: #607081;
  font-size: 11px;
  padding: 1px 3px;
}
.navigation{
  text-align: center;
}
.navigation>img{
  width: 36px;
  display: block;
  margin: 10px auto 5px;
}
.navigation>p{
  margin: 0;
}
.van-cell__value{
  flex: 0 42px;
  -webkit-box-flex: 0 42px;
  -webkit-flex: 0 42px;
}
.gasmap{
  height: 260px;
  width: 100%;
}
#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 220px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
.pop{
  width: 100%;
  height: 100%;
}
.allmap{
  width: 100%;
  height: 100%;
}
#back {
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 30px;
}
#back .van-button{
  width: 50%;
}
</style>
</body>
</html>
